<template>
  <div>
    <el-collapse v-model="active">
      <el-collapse-item title="基本" name="1">
        <Basic />
      </el-collapse-item>
      <el-collapse-item title="中文描述" name="2">
        <TextCN />
      </el-collapse-item>
      <el-collapse-item title="英文描述" name="3">
        <TextEN />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script type="text/jsx">
  import EleSwitchInline from '@/components/switch-inline';

  const Basic = {
    name: 'switch-inline-basic',
    data () {
      return {isSwitch: false}
    },
    render () {
      return (<EleSwitchInline vModel={this.isSwitch} />)
    }
  };

  const TextCN = {
    name: 'switch-inline-text-CN',
    data () {
      return {isSwitch: false}
    },
    render () {
      return (<EleSwitchInline vModel={this.isSwitch} props={{activeText: '开启', inactiveText: '关闭'}} />)
    }
  };

  const TextEN = {
    name: 'switch-inline-text-EN',
    data () {
      return {isSwitch: false}
    },
    render () {
      return (<EleSwitchInline vModel={this.isSwitch} props={{activeText: 'ON', inactiveText: 'OFF'}} />)
    }
  };

  export default {
    name: 'e-switch-inline',
    components: {
      Basic,
      TextCN,
      TextEN
    },
    data () {
      return {active: ['1', '2']};
    }
  }
</script>
